<template>
  <div class="cardbase">
    <div class="title">
      <span>
        今日{{ title }}
        <span v-if="showPopover">
          <el-popover
            :content="popover"
            placement="bottom"
            popper-class="centers"
            trigger="hover"
            :v-if="showPopover"
          >
            <i slot="reference" class="el-icon-warning-outline"></i>
          </el-popover>
        </span>
      </span>
      <el-popover
        :content="tag.content"
        placement="bottom"
        popper-class="centers"
        trigger="hover"
        :v-if="showPopover"
      >
        <el-tag
          :key="tag.title"
          slot="reference"
          class="tag"
          effect="plain"
          type="warning"
        >
          {{ tag.title }}
        </el-tag>
      </el-popover>
    </div>
    <div class="numbers">
      {{ nums ? nums : 0 }}
    </div>
    <div class="infos">
      日同比 {{ day ? day : 0 }}
      <div class="">昨日{{ title }} {{ tnums ? tnums : 0 }}</div>
    </div>
    <div class="bottominfo">
      {{ title }}总数
      <div>{{ allnums ? allnums : 0 }}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Card",
  props: {
    title: {
      type: String,
      default() {
        return "";
      }
    }, //标题
    showPopover: Boolean, //显示标题 ❓ icon
    popover: {
      type: String,
      default() {
        return "";
      }
    }, //❓ icon 提示内容
    tag: {
      type: Object,
      default() {
        return {};
      }
    }, // 标题右侧标签内容 {title:'xx',content:'xx'}
    nums: {
      type: String,
      default() {
        return "";
      }
    }, // 总量
    day: {
      type: String,
      default() {
        return "";
      }
    },
    tnums: {
      type: String,
      default() {
        return "";
      }
    },
    allnums: {
      type: String,
      default() {
        return "";
      }
    }
  },
  data() {
    return {};
  }
};
</script>
<style lang="scss">
.centers {
  display: flex;
  justify-content: center;
}

.cardbase {
  .bottominfo {
    margin-top: 25px;
    padding-top: 18px;
    border-top: $--color-white solid 1px;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .infos {
    display: flex;
    align-items: center;
    font-size: 14px;
    line-height: 30px;
    margin-top: 25px;
    div {
      padding-left: 25px;
    }
  }
  .numbers {
    margin-top: 48px;
    color: $--color-primary;
    font-size: 36px;
  }
  /* margin-top: 100px; */

  padding: 20px;
  background-color: $--color-white;

  width: calc(100% - 40px);
  //margin: 0 10px;
  margin-top: 10px;
  //margin-right: 10px;
  .title {
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .tag {
      font-size: 12px !important;
      color: $--color-primary;
      border-color: $--color-primary !important;
      line-height: 19px;
      height: 19px;
    }
  }
}
</style>
